<template>
    <div class="page">
        <a v-show="showTotal&&total>0" style="width: 100px;">共 {{ total }} 条</a>
        <a style="cursor: pointer;" v-show="curPage>1" class="prev" @click="prevPage">上一页</a>
        <a style="cursor: pointer;" v-for="(item,ind) in showPage" :key="ind" @click="tempPageChange(item)"
            :class="item==curPage?'active':null">{{ item }}</a>
        <a style="cursor: pointer;" class="next" @click="nextPage" v-show="Math.ceil(total/pageSize)>curPage">下一页</a>
    </div>
</template>
<script>
export default {
    name: 'MyPageView',
    //每页大小、总数
    props: ['12', '12312', '12', '3'],
    data() {
        return {
            showPage: [],
            curPage: 1,
        }
    },
    watch: {
        //监听总数的变化
        total(newVal) {
            // this.allCount = newVal;
            this.showPage = [];
            if (Math.ceil(newVal / this.pageSize) < 10) {
                for (let i = 0; i < Math.ceil(newVal / this.pageSize); i++) {
                    this.showPage.push(i + 1);
                }
            } else {
                this.showPage = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
            }
        },
        currPage(newVal) {
            this.curPage = newVal;
        },
    },
    created() {
        this.showPage = [];
        if (Math.ceil(this.total / this.pageSize) < 10) {
            for (let i = 0; i < Math.ceil(this.total / this.pageSize); i++) {
                this.showPage.push(i + 1);
            }
        } else {
            this.showPage = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
        }
    },
    methods: {
        //上一页
        prevPage() {
            if (this.curPage > 1) {
                this.curPage = this.curPage - 1;
                this.$emit('pageChange', this.curPage);
                if (this.curPage < this.showPage[0]) {
                    this.showPage = this.showPage.slice(0, -1)//删除数组最后一个元素
                    this.showPage.unshift(this.curPage);//在数组最前面插入当前页
                }
            } else {
                this.$Message.error({ content: '已经是第一页了！' })
            }
        },
        //下一页
        nextPage() {
            if (this.curPage + 1 > this.showPage[this.showPage.length - 1]) {
                if (Math.ceil(this.total / this.pageSize) > this.curPage) {
                    this.curPage += 1;
                    this.$emit('pageChange', this.curPage)
                    this.showPage = this.showPage.slice(1);//删除数组第一个元素
                    this.showPage.push(this.curPage);//在数组末尾插入当前页
                } else {
                    this.$Message.error({ content: '已经是最后一页了！' })
                }
            } else {
                this.curPage += 1;
                this.$emit('pageChange', this.curPage)
            }
        },
        //切换页码
        tempPageChange(value) {
            this.curPage = value;
            this.$emit('pageChange', value)
        }

    }
}
</script>
<style scoped>
.page {
    width: 735px;
    height: 36px;
    font-size: 0;
}

.page>a {
    display: inline-block;
    font: 12px/34px "Microsoft YaHei UI";
    width: 34px;
    height: 34px;
    border: 1px solid #9aa9b9;
    color: rgb(160, 116, 116);
    text-align: center;
    text-decoration: none;
}

.page>.prev,
.page>.next {
    width: 86px;
}

.page>a:not(:first-child) {
    margin-left: 9px;
}

.page>a:hover,
.page>a.active {
    border-color: #3388ff;
    /* border-color: #000; */
    color: #3388ff;
    background-color: #f2f8ff;
}
</style>

